import React, { ReactElement, useState, useEffect } from 'react'
import { Select, Input, Button } from 'antd'
import E from 'wangeditor'
import { getCategories, getArticlesDetail, putArticlesDetail } from '@/api/article'
import { history } from 'umi'
import styles from './add.css'

const { Option } = Select;

interface Props {

}


export default function edit({ }: Props): ReactElement {
    const [content, setContent] = useState('');
    const [list, setList] = useState([])
    const [cate, setcate] = useState([])
    const [title, setTitle] = useState('')
    const [defaultList, setDefaultList] = useState()
    let editor: any = null;

    function handleChange(value: any) {
        console.log(value)
        setcate(value)
    }

    function editArticle() {
        putArticlesDetail({
            cate,
            content,
            title,
            id: history.location.state.id
        }).then(res => {
            history.push('/article/list')
        })
    }

    useEffect(() => {
        editor = new E('#div1');
        editor.config.onchange = function (html: string) {
            setContent(html)
        };
        /**一定要创建 */
        editor.create();

        // 获取所属分类
        getCategories().then((resList: any) => {
            setList(resList[1].children)
            // 获取文章详情
            getArticlesDetail({
                id: history.location.state.id
            }).then((res: any) => {
                setTitle(res.title)
                console.log(res.cate)
                let arr: any = []
                // console.log(resList)
                resList[1].children.forEach((item: any) => {
                    // res.cate
                    console.log(res.cate, item._id)
                    if (res.cate.includes(item._id)) {
                        arr.push(item._id)
                    }
                })
                setDefaultList(arr)
                editor.txt.html(res.content)
            })
        })
        return () => {
            // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
            editor.destroy();
        };
    }, []);
    return (
        <div>
            <div className={styles.articleWarp}>
                <div className={styles.left}>
                    所属分类:
                </div>
                <div className={styles.w220}>
                    <Select
                        mode="multiple"
                        style={{ width: '100%' }}
                        placeholder="请选择所属分类"
                        onChange={handleChange}
                        defaultValue={defaultList}
                        key={defaultList}
                        optionLabelProp="label"
                    >
                        {
                            list.map((item: any) => {
                                return <Option key={item._id} value={item._id} label={item.name}>
                                    <div className="demo-option-label-item">
                                        {item.name}
                                    </div>
                                </Option>
                            })
                        }
                    </Select>
                </div>
            </div>

            <div className={styles.articleWarp}>
                <div className={styles.left}>
                    标题:
                </div>
                <div className={styles.fl1}>
                    <Input value={title} onChange={(ev) => {
                        setTitle(ev.target.value)
                    }} />
                </div>
            </div>

            <div className={styles.articleWarp}>
                <div className={styles.left}>
                    内容:
                </div>
                <div className={styles.fl1}>
                    <div id="div1"></div>
                </div>
            </div>

            <div className={styles.articleWarp}>
                <div className={styles.left}>
                    <Button type="primary" onClick={editArticle}>保存</Button>
                </div>
            </div>

        </div>
    )
}
